<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类&&伪元素</title>
</head>
<style>
    .btn1{
        background-color: pink;
    }

    .btn1:hover{
        background-color: gray;
    }

    li {
        width:100px;
        background-color: orange;
    }


    /* :link > :visited > :hover > :active */
    a:link { color: blue; }          /* 未访问链接 */
    a:visited { color: purple; }     /* 已访问链接 */
    a:hover { background: yellow; }  /* 用户鼠标悬停 */
    a:active { color: red; }         /* 激活链接 */


</style>
<br>
    <!-- 
        伪类： 添加到选择器的关键字，指定要选择的元素的特殊状态

        伪元素：附加至选择器末尾的关键词
     -->
     <div class="box">
        <button class="btn1">Click me</button>
        <br></br>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <p></p>

        <a src='www.baidu.com'>This is a link</a>
     </div>
</body>
</html>